import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { Table } from 'antd'
import style from './style.module.less'

// 获取表格字段配置
function getColumns () {
  const list = [
    {
      title: '序号',
      dataIndex: 'index',
      key: 'index',
      align: 'center',
      width: 60
    },
    {
      title: '案由',
      dataIndex: 'name',
      key: 'name',
      sorter: true
    },
    {
      title: '数量',
      dataIndex: 'casenum',
      key: 'casenum',
      sorter: true,
      align: 'right'
    },
    {
      title: '数量占比',
      dataIndex: 'casenum_percent',
      key: 'casenum_percent',
      align: 'right'
    },
    {
      title: '标的',
      dataIndex: 'disputeamount',
      key: 'disputeamount',
      sorter: true,
      align: 'right',
      render: v => {
        return `${v}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
      }
    },
    {
      title: '标的占比',
      dataIndex: 'disputeamount_percent',
      key: 'disputeamount_percent',
      align: 'right'
    },
    {
      title: '操作',
      key: 'operate',
      render: (v, l) => {
        if (l.index === '总数') {
          return null
        }
        return <span className={style.link} onClick={() => this.props.toDetail(l.name)}>查看详情</span>
      }
    }
  ]
  return list
}

export default class CauseActionTable extends Component {
  render () {
    return (
      <Table loading={this.props.loading} columns={getColumns.call(this)} dataSource={this.props.data} pagination={false} rowKey='index' />
    )
  }
}

CauseActionTable.propTypes = {
  data: PropTypes.array,
  // eslint-disable-next-line react/no-unused-prop-types
  toDetail: PropTypes.func,
  loading: PropTypes.bool
}

CauseActionTable.defaultProps = {
  data: [],
  toDetail: () => {},
  loading: false
}
